<div id="header">
    <section id="nav" class="swiper-container">
        <ul class="tab swiper-wrapper">
            <li class="swiper-slide active-nav">
                红名单
            </li>
            <li class="swiper-slide">
                黑名单
            </li>
        </ul>
    </section>
</div>
<section class="swiper-container" id="page">
    <ul class="swiper-wrapper">
        <li class="swiper-slide slidepage">
            <ul class="list border">
                <li>
                    <label class="title min_title">上榜原因:</label>
                    <span class="cont">规章制度健全、出警即使、收费合理、服从路政单位管理</span>
                </li>
                <li>
                    <label class="title min_title">奖励措施:</label>
                    <span class="cont">调高信用等级，减少监督检查次数</span>
                </li>
                <li>
                    <label class="title min_title">认证单位:</label>
                    <span class="cont">七里河支队</span>
                </li>
                <li>
                    <label class="title min_title">认证日期:</label>
                    <span class="cont">2019-12-02</span>
                </li>
            </ul>
            <ul class="list border">
                <li>
                    <label class="title min_title">上榜原因:</label>
                    <span class="cont">规章制度健全、出警即使、收费合理、服从路政单位管理</span>
                </li>
                <li>
                    <label class="title min_title">奖励措施:</label>
                    <span class="cont">调高信用等级，减少监督检查次数。</span>
                </li>
                <li>
                    <label class="title min_title">认证单位:</label>
                    <span class="cont">七里河支队</span>
                </li>
                <li>
                    <label class="title min_title">认证日期:</label>
                    <span class="cont">2019-12-02</span>
                </li>
            </ul>
        </li>
        <li class="swiper-slide slidepage">
            <h1 class="no_data">暂无数据</h1>
        </li>
    </ul>
    <section>
        <p class="oper" id="oper">
            <button class="btn" id="back">返回</button>
        </p>
    </section>
</section>
<script>
    $(function(){
        oper();
    })
    var myNav = new Swiper('#nav', {
        spaceBetween: 10,
        slidesPerView: 2,
        watchSlidesProgress: true,
        watchSlidesVisibility: true,
        on: {
            tap: function () {
                myPage.slideTo(myNav.clickedIndex)
            }
        }
    })
    var myPage = new Swiper('#page', {
        on: {
            slideChangeTransitionStart: function () {
                updateNavPosition()
            }
        }
    })
    function updateNavPosition() {
        $('#nav .active-nav').removeClass('active-nav');
        var activeNav = $('#nav .swiper-slide').eq(myPage.activeIndex).addClass('active-nav');
        if (!activeNav.hasClass('swiper-slide-visible')) {
            if (activeNav.index() > myNav.activeIndex) {
                var thumbsPerNav = Math.floor(myNav.width / activeNav.width()) - 1
                myNav.slideTo(activeNav.index() - thumbsPerNav)
            }
            else {
                myNav.slideTo(activeNav.index())
            }
        }
    }
</script>